import React, { Component } from 'react'
import { FenleiApi } from '../request/api'
import "./less/Practice.less"
import GoBack from '../components/GoBack'
import {connect} from 'react-redux'

class Practice extends Component {
    state = {
        // all  全部, err   错误, done 已做, notdone 没做
        testType: "all",
        // 当前学科数组
        testTypeArr: [
            { key: "all", cn: "全部" },
            { key: "err", cn: "错误" },
            { key: "done", cn: "已做" },
            { key: "notdone", cn: "没做" }
        ],
        fenleiActive: "all",
        // 题目分类数组
        fenleiArr: [],
        numActive: 5,
        // 做题数量数组
        numArr: [5, 10, 20, 30, 50, 100]
    }
    render() {
        return (
            <div className="practice">
                <div className="top">
                    <div className="btn btn1" onClick={this.goExam.bind(this)}>进入练习模式</div>
                    <div className="btn btn2" onClick={this.goExamFail.bind(this)}>进入考试模式（暂未开放）</div>
                </div>
                <div className="title">当前学科</div>
                <ul className="list">
                    {
                        this.state.testTypeArr.map(item => (
                            <li key={item.key} className={this.state.testType === item.key ? 'active' : ''} onClick={this.changeTestType.bind(this, item.key)}>{item.cn}</li>
                        ))
                    }
                </ul>
                <div className="title">题目类型</div>
                <ul className="list">
                    {
                        this.state.fenleiArr.map(item => (
                            <li key={item.key} className={this.state.fenleiActive === item.key ? 'active' : ''} onClick={()=>this.setState({fenleiActive: item.key})}>{item.cn}({item.value})</li>
                        ))
                    }
                </ul>
                <div className="title">做题数量</div>
                <ul className="list">
                    {
                        this.state.numArr.map(item => (
                            <li key={item} className={this.state.numActive === item ? 'active' : ''} onClick={()=>this.setState({numActive: item})}>{item}</li>
                        ))
                    }
                </ul>
                <GoBack />
            </div>
        )
    }
    // 跳转到题目列表（考试页面）
    goExam(){
        this.props.history.push({pathname: "/exam", state: {
            testNum: this.state.numActive,
            testType: this.state.testType,
            actionCode: this.props.match.params.actionCode,
            questionType: this.state.fenleiActive
        }})
    }
    goExamFail(){
        this.props.showAlert();
        setTimeout(()=>{
            this.props.hideAlert();
        }, 2000)
    }
    // 修改testType
    changeTestType(key) {
        this.setState({ testType: key }, ()=>{
            this.getDataFn();
        });
    }
    // 获取数据的函数
    getDataFn() {
        let actionCode = this.props.match.params.actionCode;
        FenleiApi({
            actionCode,
            testType: this.state.testType
        }).then(res => {
            let arr = res.data;
            arr.forEach(item => {
                switch (item.key) {
                    case "all":
                        item.cn = "全部";
                        break;
                    case "qa":
                        item.cn = "问答";
                        break;
                    case "code":
                        item.cn = "编程";
                        break;
                    case "one":
                        item.cn = "单选";
                        break;
                    case "check":
                        item.cn = "判断";
                        break;
                    case "many":
                        item.cn = "多选";
                        break;
                    case "fill":
                        item.cn = "填空";
                        break;
                    default:
                        break;
                }
            })
            if (res.errCode === 0) {
                this.setState({ fenleiArr: arr }, () => {
                    console.log(this.state.fenleiArr);
                });

            }
        })
    }
    componentDidMount() {
        this.getDataFn();
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        showAlert(){
            dispatch({type: 'showAlert', value: {
                alertType: "warning",
                alertContent: "该功能暂未开放"
            }})
        },
        hideAlert(){
            dispatch({type: "hideAlert"})
        }
    }
}

export default connect(null, mapDispatchToProps)(Practice)